<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 使用 AbortController
        let currentController = null;

        async function fetchPageData(page) {
            // 取消上一个未完成的请求
            if (currentController) {
                currentController.abort();
            }
            const controller = new AbortController();
            currentController = controller;
            try {
                const response = await fetch(`/api/data?page=${page}`, {
                    signal: controller.signal
                });
                const data = await response.json();
                
                // 只有当前控制器未被取消时才更新UI
                if (!controller.signal.aborted) {
                    renderData(data);
                }
            } catch (error) {
                if (error.name !== 'AbortError') {
                    console.error('请求失败:', error);
                }
            }
        }

        // 使用 axios CancelToken

        const CancelToken = axios.CancelToken;
        let cancel;

        function fetchPageData(page) {
        // 取消上一个未完成的请求
        if (cancel) {
            cancel('请求取消');
        }
        
        axios.get(`/api/data?page=${page}`, {
                cancelToken: new CancelToken(function executor(c) {
                cancel = c;
            })
        }).then(response => {
            renderData(response.data);
        }).catch(error => {
            if (!axios.isCancel(error)) {
                console.error('请求失败:', error);
            }
        });
        }
    </script>
</body>
</html>